CSS @supports-regelen: En omfattende guide til funksjonsdeteksjon

I det stadig utviklende landskapet av webutvikling kan det å sikre kryss-nettleserkompatibilitet og gi en konsistent brukeropplevelse være en betydelig utfordring. Ulike nettlesere støtter forskjellige CSS-funksjoner, og å stole på funksjoner som ikke er universelt tilgjengelige, kan føre til ødelagte layouter og frustrerte brukere. CSS-@supports-regelen gir en kraftig mekanisme for funksjonsdeteksjon, som lar deg betinget anvende CSS-stiler basert på om en bestemt funksjon støttes av brukerens nettleser.

Hva er CSS @supports-regelen?

@supports-regelen er en betinget @-regel i CSS som lar deg sjekke om en nettleser støtter en spesifikk CSS-funksjon. Den fungerer i hovedsak som en hvis-setning for CSS, som gjør at du kan skrive forskjellige stiler basert på tilgjengeligheten av en bestemt funksjon. Dette muliggjør gradvis forbedring, der du kan bruke nyere CSS-funksjoner i nettlesere som støtter dem, samtidig som du gir en reserveløsning for eldre nettlesere.

I motsetning til nettlesersniffing (detektering av nettlesernavn og versjon), som generelt frarådes på grunn av dens upålitelighet og vedlikeholds overhead, fokuserer @supports på funksjonsdeteksjon. Dette betyr at du sjekker om nettleseren faktisk støtter en bestemt CSS-egenskap eller verdi, uavhengig av nettleserens navn eller versjon. Denne tilnærmingen er mye mer robust og fremtidssikker.

Syntaks for @supports-regelen

Syntaksen for @supports-regelen er enkel:

            @supports (betingelse) {
  /* CSS-regler som skal brukes hvis betingelsen er sann */
}

@supports not (betingelse) {
  /* CSS-regler som skal brukes hvis betingelsen er usann */
}

            

              
                Copy
              
            
          

• @supports: Nøkkelordet som starter regelen.
• (betingelse): Betingelsen som skal testes. Dette er vanligvis et CSS-egenskap-verdi-par eller et mer komplekst boolsk uttrykk.
• {}: Klammeparentesene omslutter CSS-reglene som skal brukes hvis betingelsen er oppfylt.
• not: Et valgfritt nøkkelord som negerer betingelsen. CSS-reglene innenfor denne blokken brukes hvis betingelsen *ikke* er oppfylt.

Grunnleggende eksempler på @supports

La oss se på noen enkle eksempler for å illustrere hvordan @supports-regelen fungerer.

Sjekker støtte for display: grid

CSS Grid Layout er et kraftig layoutsystem, men det støttes ikke av alle eldre nettlesere. Du kan bruke @supports til å tilby en reserve-layout for nettlesere som ikke støtter Grid.

            .container {
  display: flex; /* Reserve for eldre nettlesere */
  flex-wrap: wrap;
}

@supports (display: grid) {
  .container {
    display: grid; /* Bruk Grid Layout i nettlesere som støtter det */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1em;
  }
}

            

              
                Copy
              
            
          

I dette eksemplet vil nettlesere som ikke støtter display: grid bruke flexbox-layouten, mens nettlesere som støtter det, vil bruke grid-layouten.

Sjekker støtte for position: sticky

position: sticky lar et element oppføre seg som position: relative til det når en spesifisert terskel, hvoretter det blir position: fixed. Dette er nyttig for å lage "sticky" headere eller sidekolonner.

            .sticky-header {
  position: relative; /* Reserve for eldre nettlesere */
}

@supports (position: sticky) {
  .sticky-header {
    position: sticky;
    top: 0;
    background-color: white;
    z-index: 10;
  }
}

            

              
                Copy
              
            
          

Her vil nettlesere som ikke støtter position: sticky bare ha en relativt posisjonert header, mens støttende nettlesere vil få "sticky"-header-effekten.

Bruker not-nøkkelordet

not-nøkkelordet lar deg bruke stiler når en funksjon *ikke* støttes.

            .element {
  background-color: lightblue;
}

@supports not (backdrop-filter: blur(5px)) {
  .element {
    background-color: rgba(173, 216, 230, 0.8); /* Reserve for nettlesere som ikke støtter backdrop-filter */
  }
}

            

              
                Copy
              
            
          

I dette tilfellet, hvis nettleseren ikke støtter backdrop-filter-egenskapen, vil elementet ha en halvtransparent lyseblå bakgrunn i stedet for en uskarp bakgrunn.

Komplekse betingelser med boolske operatorer

@supports-regelen lar deg også kombinere flere betingelser ved hjelp av boolske operatorer: and, or.

Bruker and-operatoren

and-operatoren krever at begge betingelsene er sanne for at stilene skal brukes.

            @supports (display: flex) and (align-items: center) {
  .container {
    display: flex;
    align-items: center;
    justify-content: center;
  }
}

            

              
                Copy
              
            
          

Dette eksemplet bruker flexbox-stilene kun hvis nettleseren støtter både display: flex og align-items: center.

Bruker or-operatoren

or-operatoren krever at minst én av betingelsene er sann for at stilene skal brukes.

            @supports ((-webkit-mask-image: url(mask.svg))) or ((mask-image: url(mask.svg))) {
  .masked-element {
    mask-image: url(mask.svg);
    -webkit-mask-image: url(mask.svg);
  }
}

            

              
                Copy
              
            
          

Her brukes stilene hvis nettleseren støtter enten den prefixede -webkit-mask-image eller standard mask-image-egenskapen. Dette er nyttig for å håndtere leverandørprefiks.

Kombinere not med boolske operatorer

Du kan også kombinere not med and og or for mer komplekse betingelser.

            @supports not ((transform-origin: 50% 50%) and (perspective: 500px)) {
  .element {
    /* Stiler som skal brukes hvis enten transform-origin eller perspective ikke støttes */
    /* Dette kan være en reserve for 3D-transformasjoner i eldre nettlesere */
  }
}

            

              
                Copy
              
            
          

Praktiske anvendelser av @supports

@supports-regelen kan brukes i et bredt spekter av scenarier for å forbedre brukeropplevelsen og sikre kryss-nettleserkompatibilitet.

Forbedre typografi

Du kan bruke @supports til å bruke avanserte typografifunksjoner som font-variant-numeric eller text-shadow i nettlesere som støtter dem.

            p {
  font-family: sans-serif;
}

@supports (font-variant-numeric: tabular-nums) {
  p {
    font-variant-numeric: tabular-nums;
  }
}

@supports (text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5)) {
  h1 {
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  }
}

            

              
                Copy
              
            
          

Implementere avanserte layouter

Som sett tidligere, er @supports utmerket for å håndtere forskjellige layoutsystemer. Du kan bruke den til å bytte mellom flexbox, grid layout, eller til og med eldre teknikker som floats basert på nettleserstøtte.

            .container {
  float: left; /* Reserve for veldig gamle nettlesere */
  width: 100%;
}

@supports (display: flex) {
  .container {
    display: flex;
    justify-content: space-between;
  }
}

@supports (display: grid) {
  .container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1em;
  }
}

            

              
                Copy
              
            
          

Anvende visuelle effekter

Moderne CSS-funksjoner som filter, backdrop-filter, og clip-path kan brukes til å lage fantastiske visuelle effekter. Bruk @supports for å sikre at disse effektene ikke ødelegger layouten i eldre nettlesere.

            .image {
  border-radius: 5px; /* Reserve */
}

@supports (clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%)) {
  .image {
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  }
}

@supports (backdrop-filter: blur(10px)) {
  .modal {
    backdrop-filter: blur(10px);
  }
}

            

              
                Copy
              
            
          

Håndtere leverandørprefiks

Selv om leverandørprefiks blir mindre vanlig, kan de fortsatt være relevante når man håndterer eldre nettleserversjoner. @supports kan hjelpe deg med å bruke prefiks-egenskaper der det er nødvendig.

            .element {
  /* Standardegenskap */
  user-select: none;

  /* Leverandørprefikserte egenskaper med funksjonsdeteksjon */
  @supports not (user-select: none) and (-webkit-user-select: none) {
    .element {
      -webkit-user-select: none; /* For eldre Safari */
    }
  }

  @supports not (user-select: none) and (-moz-user-select: none) {
    .element {
      -moz-user-select: none; /* For eldre Firefox */
    }
  }
}

            

              
                Copy
              
            
          

Beste praksis for bruk av @supports

For å effektivt bruke @supports-regelen, bør du vurdere disse beste praksisene:

• Prioriter gradvis forbedring: Start med et grunnleggende, funksjonelt design som fungerer i alle nettlesere. Bruk deretter @supports for å legge til forbedringer for moderne nettlesere.
• Hold det enkelt: Unngå for komplekse betingelser. Enklere betingelser er lettere å forstå og vedlikeholde.
• Test grundig: Test nettstedet ditt i en rekke nettlesere for å sikre at reserve-stilene fungerer korrekt og at de forbedrede stilene brukes der det er forventet. Bruk verktøy for nettlesertesting og ekte enheter.
• Bruk funksjonsspørringer sparsomt: Selv om @supports er kraftig, kan overforbruk føre til oppblåst CSS. Vurder om en funksjon er virkelig viktig eller bare en "nice-to-have".
• Kommenter koden din: Dokumenter tydelig hvorfor du bruker @supports og hva reserve-stilene er ment å oppnå. Dette vil gjøre koden din lettere å forstå og vedlikeholde for deg selv og andre.
• Unngå nettlesersniffing: Motstå fristelsen til å bruke JavaScript-basert nettlesersniffing. @supports gir en mer pålitelig og fremtidssikker løsning for funksjonsdeteksjon.
• Vurder polyfills: For noen funksjoner kan polyfills (JavaScript-biblioteker som gir manglende funksjonalitet i eldre nettlesere) være et bedre alternativ enn @supports, spesielt hvis du trenger en konsistent opplevelse på tvers av alle nettlesere. Vurder imidlertid fordelene med en polyfill mot dens ytelsespåvirkning.

Alternativer til @supports

Selv om @supports er den primære metoden for funksjonsdeteksjon i CSS, finnes det alternative tilnærminger å vurdere.

Modernizr

Modernizr er et populært JavaScript-bibliotek som detekterer tilgjengeligheten av HTML5- og CSS3-funksjoner. Det legger til klasser på <html>-elementet basert på funksjonsstøtte, noe som gjør at du kan målrette spesifikke nettlesere med CSS. Selv om det er kraftig, legger Modernizr til en avhengighet av JavaScript og kan øke lastetiden for siden.

JavaScript funksjonsdeteksjon

Du kan også bruke JavaScript til å detektere funksjonsstøtte og bruke stiler dynamisk. Denne tilnærmingen tilbyr mer fleksibilitet, men kan være mer kompleks enn å bruke @supports eller Modernizr. Det kan også føre til et "flash of unstyled content" (FOUC) hvis JavaScript tar for lang tid å utføre.

Betingede kommentarer (for Internet Explorer)

Betingede kommentarer er en Microsoft-spesifikk teknikk for å målrette Internet Explorer-versjoner. De frarådes generelt fordi de ikke er standard CSS og bare fungerer i IE. De kan imidlertid være nyttige i sjeldne tilfeller der du trenger å adressere spesifikke IE-feil eller begrensninger. Husk at betingede kommentarer ikke støttes i IE10 og senere versjoner.

            <!--[if lt IE 9]>
  <link rel="stylesheet" href="ie8-and-below.css">
<![endif]-->

            

              
                Copy
              
            
          

Begrensninger ved @supports

Til tross for sine styrker, har @supports noen begrensninger:

• Begrenset til egenskap-verdi-par: Den vanligste bruken er å sjekke støtte for spesifikke CSS-egenskap-verdi-par. Selv om komplekse betingelser er mulig, kan de bli uhåndterlige.
• Detekterer ikke delvis støtte: @supports kan bare fortelle deg om en funksjon støttes eller ikke. Den gir ingen informasjon om nivået av støtte eller eventuelle begrensninger i implementeringen.
• Spesifisitetshensyn: Stiler som brukes innenfor @supports-blokker har samme spesifisitet som andre CSS-regler. Vær oppmerksom på spesifisitet når du overstyrer stiler innenfor @supports.
• Ikke støttet i veldig gamle nettlesere: Veldig gamle nettlesere (f.eks. IE8 og eldre) støtter ikke @supports. Du må bruke alternative metoder som betingede kommentarer eller polyfills for disse nettleserne.

Konklusjon

CSS @supports-regelen er et essensielt verktøy for moderne webutvikling. Den lar deg skrive mer robust og tilpasningsdyktig CSS-kode, som sikrer at nettstedene dine gir en god brukeropplevelse på tvers av et bredt spekter av nettlesere. Ved å omfavne gradvis forbedring og bruke @supports strategisk, kan du utnytte de nyeste CSS-funksjonene, samtidig som du støtter eldre nettlesere og gir en konsistent opplevelse for alle brukere. Husk å prioritere funksjonsdeteksjon over nettlesersniffing, teste grundig, og holde koden din ren og godt dokumentert.

Etter hvert som nettet fortsetter å utvikle seg, vil mestring av teknikker som @supports bli stadig viktigere for å bygge høykvalitets, tilgjengelige og fremtidssikre nettsteder som henvender seg til et globalt publikum. Så, omfavn kraften i funksjonsdeteksjon og skap nettopplevelser som er både innovative og pålitelige.